#{extends 'main.html' /}
#{set title:'User overview' /}

#{set 'moreScripts'}
    <script src="@{'/public/javascripts/jquery.dataTables.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script>
        $(document).ready( function() {
            oTable = $('.userTable').dataTable();
        });
    </script>
#{/set}

#{navigation /}

<div class="content">
		<h1>User Overview</h1>
	
	<div style="width: 80%; margin: auto">
		<table cellpadding="0" cellspacing="0" border="0" class="userTable" id="userTable">
			<thead>
				<tr><th>Username</th><th>Real name</th><th>Joined</th></tr>
			</thead>
			<tbody>
				#{list items:users, as:'user'}
					<tr><td><a href="@{Users.show(user.id)}">${user.name}</a></td><td>${user.realname}</td><td>${user.joinDate.format('dd-MM-yyyy')}</td></tr>
				#{/list}
			</tbody>
		</table>
	</div>
</div>